<template>
  <div class="player-container">
    <div class="video-box">
      <div id="ezuikit-player"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import EZUIKit from 'ezuikit-js'

// 创建播放器方法
const createPlayer = () => {
  console.group('mounted 组件挂载完毕状态===============》')

  try {
    const player = new EZUIKit.EZUIKitPlayer({
      id: 'ezuikit-player',
      url: 'ezopen://open.ys7.com/AB9831171/1.hd.live',
      accessToken: 'ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns',
      template: 'standard',
      autoplay: true,
      header: ['capturePicture', 'save', 'zoom'],
      plugin: ['talk'],
      width: window.innerWidth * 0.95,
      height: window.innerHeight * 0.8,
      borderRadius: 12,
    })

    console.log('player', player)

    // 添加窗口大小变化监听
    window.addEventListener('resize', () => {
      player.resize(window.innerWidth * 0.95, window.innerHeight * 0.8)
    })

    return player
  } catch (err) {
    console.error('播放器创建失败:', err)
  }
}

let player = null

// 组件挂载时创建播放器
onMounted(() => {
  player = createPlayer()
})

// 组件卸载时销毁播放器
onUnmounted(() => {
  if (player) {
    try {
      player.destroy()
    } catch (err) {
      console.error('播放器销毁失败:', err)
    }
  }
})
</script>

<style scoped>
.player-container {
  position: relative;
  width: 100%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  padding: 20px;
}

.video-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: #fff;
  transition: all 0.3s ease;
}

.video-box:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* 确保播放器容器响应式 */
#ezuikit-player {
  width: 100% !important;
  height: 100% !important;
}
</style>
